<template>
  <view class="index">
    <view class="head">
      <image src="@/static/image/logo/1.png" mode="widthFix" />
      <view>
        <image @click="goTo('/pages/notLoggedIn/lang')" src="@/static/image/1.png" mode="widthFix" />
        <image @click="goTo('/pages/index/messageCenter')" src="@/static/image/2.png" mode="widthFix" />
        <up-badge absolute :offset="[0, 0]" :isDot="count ? true : false"></up-badge>
      </view>
    </view>
    <view class="iconList">
      <view @click="goTo('/pages/index/rechargeList')">
        <view>
          <image src="@/static/image/3.png" mode="widthFix" />
        </view>
        <view>{{ $t('index.recharge') }}</view>
      </view>
      <view @click="goTo('/pages/index/withdrawal')">
        <view>
          <image src="@/static/image/4.png" mode="widthFix" />
        </view>
        <view>{{ $t('index.withdrawal') }}</view>
      </view>
      <view @click="goTo('/pages/index/help')">
        <view>
          <image src="@/static/image/5.png" mode="widthFix" />
        </view>
        <view>{{ $t('index.help') }}</view>
      </view>
      <view @click="goTo('/pages/index/team')">
        <view>
          <image src="@/static/image/6.png" mode="widthFix" />
        </view>
        <view>{{ $t('index.team') }}</view>
      </view>
      <view @click="goTo('/pages/index/download')">
        <view>
          <image src="@/static/image/7.png" mode="widthFix" />
        </view>
        <view>{{ $t('index.downloadApp') }}</view>
      </view>
      <view @click="goTo('/pages/index/activity')">
        <view>
          <image src="@/static/image/8.png" mode="widthFix" />
        </view>
        <view>{{ $t('index.activity') }}</view>
      </view>
      <view @click="goTo('/pages/index/agentCooperation')">
        <view>
          <image src="@/static/image/9.png" mode="widthFix" />
        </view>
        <view>{{ $t('index.agentCooperation') }}</view>
      </view>
      <view @click="goTo('/pages/index/invite')">
        <view>
          <image src="@/static/image/10.png" mode="widthFix" />
        </view>
        <view>{{ $t('index.inviteFriends') }}</view>
      </view>
    </view>
    <up-notice-bar @click="goTo('/pages/mine/message')" v-if="notice" :text="notice || ''"
      color="rgba(255,255,255,0.6)"></up-notice-bar>
    <view class="bar">
      <view @click="goReLaunch('/pages/quantification/index')">
        <view>
          <view>{{ $t('index.quantitativeTrading') }}</view>
          <view>{{ $t('index.efficientStableEarnings') }}</view>
        </view>
        <view>
          <image src="@/static/image/15.png" mode="widthFix" />
        </view>
      </view>
      <view @click="goTo('/pages/index/invite')">
        <view>
          <view>{{ $t('index.inviteFriends') }}</view>
          <view>{{ $t('index.earnIncome') }}</view>
        </view>
        <view>
          <image src="@/static/image/16.png" mode="widthFix" />
        </view>
      </view>
    </view>
    <view class="videoCla" v-if="!noticeShow">
      <video src="https://gather-top.s3.ap-east-1.amazonaws.com/public/video/2-gather-open-all.mp4" controls
        preload="auto" poster="@/static/image/17.png" object-fit="cover" type="video/mp4"></video>
    </view>
    <up-notice-bar :text="WithdrawalLogArr" :iconText="$t('index.withdrawalLog')" direction="column" icon=""
      color="rgba(255,255,255,0.8)" />
    <view class="statistics">
      <view>
        <view>{{ IndexStatisticsObj.day }}{{ $t('invest.day') }}</view>
        <view>{{ $t('index.safeOperation') }}</view>
      </view>
      <view>
        <view>{{ IndexStatisticsObj.total_income }}USDT</view>
        <view>{{ $t('index.totalIncome') }}</view>
      </view>
    </view>
    <view class="tips">
      <view>{{ $t('index.tips.description1') }}</view>
      <view>{{ $t('index.tips.description2') }}</view>
      <view>{{ $t('index.tips.description3') }}</view>
    </view>
    <up-overlay :show="noticeShow" @click="noticeShow = false" :mask-click-able="false">
      <view class="noticeAlert" @tap.stop @touchmove.stop>
        <view>
          <view>{{ noticeInfo.title }}</view>
          <view v-html="noticeInfo.content"></view>
          <view class="btn" @tap="noticeShow = false">{{ $t('index.notice.confirm') }}</view>
        </view>
      </view>
    </up-overlay>
    <customerService />
  </view>
</template>
<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
import { onShow } from "@dcloudio/uni-app";

const instance = getCurrentInstance()?.appContext.config.globalProperties;
import { SysNoticePopup, SysNotice, WithdrawalLog, IndexStatistics } from "@/api/SystemApi";
import { UsersMailUnreadCount } from "@/api/UserApi";

let noticeShow = ref<boolean>(false)
let noticeInfo = ref<any>({})

SysNoticePopup().then((e) => {
	noticeInfo.value = e
	noticeShow.value = e.display
})

let notice = ref<any>()
const list1 = reactive([
	{ name: 'BINANCE' },
	{ name: 'OKX' },
	{ name: 'HUONI' },
	{ name: 'COINBASE' },
	{ name: 'BTC' },
	{ name: 'BNB' },
	{ name: 'RTC' },
]);

function click(item: any) {
	console.log('item', item);
}

let count = ref<number>(0)
let WithdrawalLogArr = ref<Array<any>>([])
let IndexStatisticsObj = ref<any>({})

onShow(async () => {
	instance?.$changeLanguage()
	if (uni.getStorageSync('userInfo')) {
		UsersMailUnreadCount().then((e) => {
			count.value = e.count
		})
	}

	SysNotice({ select_time: null }).then((e) => {
		if (e[0]) {
			notice.value = e[0].title
		}

	})
	WithdrawalLog().then((e) => {
		WithdrawalLogArr.value = []
		e.forEach((item: any) => {
			WithdrawalLogArr.value.push(item.user_name + ' +$' + item.money)
		})
	})
	IndexStatistics().then((e) => {
		IndexStatisticsObj.value = e
	})


});
</script>
<style scoped lang="scss">
@import "../../static/scss/index.scss";
</style>